<script setup></script>
<template>
	<view class="indexLayout">
		<view class="box">

			<view class="content-box">
				<view class="content">
					<view class="content-images">
						<image src="/static/index/收藏.png" class="img1" mode="aspectFit" />
						<image src="/static/index/详情.png" class="img2" mode="aspectFit" />
					</view>
					<view class="content-author">
						<view class="content-author-name">
							宋
							<view class="text-circle"></view>
							贺铸
						</view>
						<view class="content-author-ic">
							<image src="/static/index/icon.png" mode="aspectFit" />
						</view>
					</view>
					<view class="content-gushi">
						<view class="content-text">江南渭北三千里</view>
						<view class="content-text">鸳鸯俱是白头时</view>
					</view>
				</view>
			</view>


		</view>
	</view>
</template>
<style lang="scss" scoped>
	.indexLayout {
		background-color: #f5f5f5;
		overflow: hidden;

		.box {
			width: 100vw;
			height: 90vh;
			background-color: #f5f5f5;

			.content-box {
				margin: 84rpx auto 0;
				width: 565rpx;
				height: 1130rpx;
				box-shadow: 0px 9.62px 28.85px rgba(0, 0, 0, 0.35);

				.content {
					width: 100%;
					height: 100%;
					background-image: url("/static/index/背景图.png");
					background-size: 100% 100%;
					background-repeat: no-repeat;
					background-position: center;
					position: relative;

					.content-images {
						width: 117rpx;
						height: 240rpx;
						position: absolute;
						right: 40rpx;
						top: 800rpx;

						.img1 {
							width: 117rpx;
							height: 120rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.img2 {
							width: 89rpx;
							height: 92rpx;
							margin-left: 14rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}

					.content-author {
						width: 68rpx;
						height: 379rpx;
						position: absolute;
						top: 670rpx;
						left: 37rpx;

						.content-author-name {
							writing-mode: vertical-lr;
							margin: 0 auto 40rpx;
							font-size: 53rpx;
							font-family: 'main1', serif;

							.text-circle {
								display: inline-block;
								width: 12.33rpx;
								height: 12.32rpx;
								background: rgba(0, 0, 0, 1);
								border-radius: 50%;
								margin-top: 32rpx;
								margin-bottom: 44rpx;
							}
						}

						.content-author-ic {
							width: 68rpx;
							height: 68rpx;
							margin: 0 auto;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}

					.content-gushi {
						width: 146rpx;
						height: 512rpx;
						writing-mode: vertical-lr;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						position: absolute;
						top: 67rpx;
						left: 365rpx;

						.content-text {
							font-size: 53rpx;
							width: 59rpx;
							height: 100%;
							font-family: "main1", serif;
						}
					}
				}
			}
		}
	}
</style>